<template>
  <swiper
    :modules="modules"
    loop
    :autoplay="{
      delay: 2500,
      disableOnInteraction: false,
    }"
    :slides-per-view="1"
    navigation
    :pagination="{ clickable: true }"
    class="swiper app-home-swiper"
  >
    <swiper-slide v-for="b in data" :key="b.img" class="swiper-slide">
      <Nuxt-link :href="b.url" target="_blank"><img :src="b.img" alt="" /></Nuxt-link>
    </swiper-slide>
  </swiper>
</template>
<script setup lang="ts">
import { Navigation, Pagination, A11y, Autoplay, EffectFade } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css/effect-fade'

interface IProps {
  data: any
}

const props = withDefaults(defineProps<IProps>(), {
  data: [],
})
const { data } = toRefs(props)
const modules = [Navigation, Pagination, A11y, Autoplay, EffectFade]
</script>
